<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS2048 基于-源码之家</title>

<style>
 *{margin: 0;padding: 0;}
 body{
	font-size: 30px;
	overflow:hidden;
	background-image:url(1.jpg);
	background-attachment:fixed;
	background-size:100% 100%;
 }
 .readme{
	position:absolute;
	left: 2%;
	top:200px;
	width: 250px;
 }
 .readme span{
	  font-size: 20px;
	  text-align:center;
	  color: white;
	  font-weight: 800;
	  text-shadow:1px 1px 0px #000

 }
 .readme p{
	font-family: STFangsong;
    color:#000;
	font-weight:bold;
	display:inline;
	font-size: 24px;
	text-indent: 20px;
	text-shadow:2px 2px 0px #fff
	
 }
 .tab{
	margin: 200px auto 0;
	border-radius: 15px;
	text-align: center;
	font-weight: bold;
	background-color:#aaadad;
 }
 td{
	width: 100px;
	height:100px;
	border-radius:15px;
 }
 .text{
	position: absolute;
	right:17%;
	top: 100px;
	color: white;
	font-weight:STHupo;
	font-size:30px;
	text-shadow:1px 1px 0px #000;
 }
 .restart{
	font-size: 30px;
	margin: 30px;
	color: black;
	text-align: center;
	cursor: pointer;
	text-shadow:1px 1px 0px #fff;
 } 
 .score{
	color: #75ffe7;
	font-size: 40px;
 }
 #w{
	position:absolute;
	right: 300px;
	bottom:300px;
 }
 #a{
	position:absolute;
	right: 480px;
	bottom:100px;
 }
 #s{
	position:absolute;
	right: 300px;
	bottom:100px;
 }
 #d{
	position:absolute;
	right: 120px;
	bottom:100px;
 }
 #imgw{
	width: 150px;
	height:150px;
 }
 #imga{
	width: 150px;
	height:150px;
 }
 #imgs{
	width: 150px;
	height:150px;
 }
 #imgd{
	width: 150px;
	height:150px;
 }
 
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link type="text/css" href="js/jquery-ui.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="2d/waifu1.css"/>
<link rel="stylesheet" type="text/css" href="2d/flat-ui.min1.css"/>
</head>
<body>

<div class="readme">
	<span>游戏规则:</span>
	<p>游戏的规则很简单，你需要控制所有方块向同一个方向运动，两个相同数字方块撞在一起之后合并成为他们的和，
	每次操作之后会随机生成一个2或者4，最终得到一个“2048”的方块就算胜利了。<br>
	<br>相关按键：<br>移动键：“↑，↓，←，→”<br>重置：“Enter”<br>不移动，生成新的数字：“其他键”。
	</p>
</div>
	<table class="tab" cellpadding="6"></table>
	<div class="restart"><a  href="javascript:;" onclick="json.init()">重新开始</a></div>
	<div class="text">分数：<span class="score">  </span> 分</div>	
	<div id="w"><a href="javascript:;" onclick="json.top();json.randomNum();json.result();"><img id="imgw" src="img/w.png"></a></div>
	<div id="a"><a href="javascript:;" onclick="json.left();json.randomNum();json.result();"><img id="imga" src="img/a.png"></a></div>
	<div id="s"><a href="javascript:;" onclick="json.bottom();json.randomNum();json.result();"><img id="imgs" src="img/s.png"></a></div>
	<div id="d"><a href="javascript:;" onclick="json.right();json.randomNum();json.result();"><img id="imgd" src="img/d.png"></a></div>

	
<div class="waifu">
    <div class="waifu-tips"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
</div>
<script type="text/javascript">
// 模块化开发思路
var json={
	// 创建初始化函数
	init:function(){
	var otab= document.querySelector('.tab'),
		str='',
		id=1;//返回文档指定的css元素，并保存
		for(var i=0;i<4;i++){
		   str+='<tr>';
		   for(var j=0;j<4;j++){
			str +='<td id="' + id++ +'"></td>';
		   }
		   str +='</tr>';
		}
		 otab.innerHTML=str;                       
		 this.randomNum();
		 this.randomNum();
		 this.result();
	},
	
	//创建一个任意区间的随机函数
	myRandom:function(min , max){
		return Math.round(Math.random() * (max-min) + min);
	},
	//随机在格子上生成一个数字
	randomNum : function(){
	  var num = this.myRandom(1,16);
		ogrid=document.getElementById(num);
		if(ogrid.innerHTML ==''){
			ogrid.innerHTML= this.myRandom(1,2)*2;
		}else{
			this.randomNum();
		}
	},
	
	//上键
	top:function(){
		for(var i=1;i<=4;i++){
			for(var j=i;j<=i+12;j+=4){
				for(k=j;k>4;k-=4){
				   this.change(document.getElementById(k -4),
						  document.getElementById(k));
				}
			}
		}
	},
	
	//下键
	 bottom:function(){
		 for(var i=1;i<=4;i++){
			for(var j = i+12;j>=i;j -=4){
				for(var k = j;k < 13;k +=4){
					 this.change(document.getElementById(k +4),
						  document.getElementById(k));
				}
			}
		 }
	 },
	 //左键
	 left:function(){
		for(var i=1;i<=13;i+=4){
			for(var j=i; j<= i+3; j++){
				for(var k=j; k>i;k--){
					 this.change(document.getElementById(k -1),
						  document.getElementById(k));
				}
			}
		}
	 },
	 //右键
	 right:function(){
		for(var i=1;i<=13;i +=4){
			for(var j = i+4; j>=i;j--){
				for(var k=j;k<i+3;k++){
					 this.change(document.getElementById(k +1),
						  document.getElementById(k));
				}
			}
		}
	 },
	//移动合并检测函数
	change :function(before,after){
		//移动
		if(before.innerHTML == '' && after.innerHTML != ''){
			before.innerHTML= after.innerHTML;
			after.innerHTML='';
		}
		//合并
		if(before.innerHTML != '' && before.innerHTML == 
		after.innerHTML){
			 before.innerHTML *=2;
			 after.innerHTML='';
		}
		
	},       
	//改变颜色计算结果函数
	result:function(){
		var color={'':'#effafb','2':'#BEEDC7','4':'#BEE7E9','8':'#f9931d',
		'16':'#fefb9a','32':'#A0EEE1','64':'#E6CEAC','128':'#8CC7B5',
		'256':'#D1BA74','512':'#19CAAD','1024':'#ECAD9E','2048':'#D6D5B7',
		'4096':'#fefd26'},
		score=0;
		for(var i =  1 ; i <= 16 ;i++){
			var ogrid=document.getElementById(i);
			ogrid.style.backgroundColor=color[ogrid.innerHTML];
			score += ogrid.innerHTML * 10;
		}
		 document.querySelector('.score').innerHTML=score;
	}
}
window.onload=json.init();//加载完成后调用init
document.onkeydown=function(e){
  if(/38/.test(e.keyCode) ) json.top();
  if(/40/.test(e.keyCode) ) json.bottom();
  if(/37/.test(e.keyCode) ) json.left();
  if(/39/.test(e.keyCode) ) json.right();
  if(/13/.test(e.keyCode) ) json.init();
  json.randomNum();
  json.result();
}

</script>
<script src="2d/waifu-tips.js"></script>
<script src="2d/live2d.js"></script>
<script type="text/javascript">initModel()</script>

</body>
</html>